<template>
    <div class="menu">
      <el-row>
        <el-col>
          <el-menu
            active-text-color="#67C23A"
            background-color="#ffffff"
            default-active="1"
            text-color="#333"
            @open="handleOpen"
            @close="handleClose"
            >
            <el-menu-item index="1" @click="clickHandle(1)">
              <el-icon><Histogram /></el-icon>
              <span>指数</span>
            </el-menu-item>
            <el-menu-item index="2" @click="clickHandle(2)">
              <el-icon><Grid /></el-icon>
              <span>同花</span>
            </el-menu-item>
            <el-menu-item index="3" @click="clickHandle(3)">
              <el-icon><Platform /></el-icon>
              <span>大盘</span>
            </el-menu-item>
            <el-menu-item index="4" @click="clickHandle(4)">
              <el-icon><Menu /></el-icon>
              <span>设置</span>
            </el-menu-item>
            <el-menu-item index="5" @click="clickHandle(5)">
              <el-icon><TrendCharts /></el-icon>
              <span>短线</span>
            </el-menu-item>
            <el-menu-item index="6" @click="clickHandle(6)">
              <el-icon><Flag /></el-icon>
              <span>待定</span>
            </el-menu-item>
            <el-menu-item index="7" @click="clickHandle(7)">
              <el-icon><Platform /></el-icon>
              <span>数据</span>
            </el-menu-item>
                  
            <el-menu-item index="8" @click="clickHandle(8)">
              <el-icon><TrendCharts /></el-icon>
              <span>回放</span>
            </el-menu-item>
            <el-menu-item index="9" @click="clickHandle(9)">
              <el-icon><Menu /></el-icon>
              <span>周期</span>
            </el-menu-item>
            <el-menu-item index="10" @click="clickHandle(10)">
              <el-icon><Histogram /></el-icon>
              <span>分时</span>
            </el-menu-item>
            <el-menu-item index="11" @click="clickHandle(11)">
              <el-icon><Grid /></el-icon>
              <span>量化</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>

      <el-select
        v-model="value"
        placeholder="Select"
        size="large"
        class="select"
        @change="handleChange" >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </div>
</template>

<script >

export default {
  props: {
      onEvent: Function,
      selectCodeEvent:Function
  },  
  data() {
    return {
      value: '选择股票',
      options : [
      {
          value: '999999 成交量分时',
          label: '成交量分时',
        },
        {
          value: '999888 同花顺全A',
          label: '同花顺全A',
        },
        {
          value: '000001 上证指数',
          label: '上证指数',
        },
        {
          value: '999200 深证成指',
          label: '深证成指',
        },
        {
          value: '881272 软件开发',
          label: '软件开发',
        },
        {
          value: '883957 全A',
          label: '全A',
        },
        {
          value: '600679 测试',
          label: '上证指数',
        },
        {
          value: '159852 软件ETF',
          label: '软件ETF',
        },
        {
          value: '002261 拓维信息',
          label: '拓维信息',
        },
      ]
    };
  },
  methods: {
    clickHandle(value) {
        console.log(value);
        this.onEvent(value)
    },
    handleChange(value) {
      this.selectCodeEvent(value)
      console.log(value);
      console.log(value);
    }
  },
};
</script>

<style scoped>
.menu {
    flex: 10; /* 默认为1, 这里需要设置为0.1以表示10% */
  }
  .select{
    margin-top: 20px;
    margin-left:10%;
    margin-right: 10%;
    width:80%;
  }
</style>
